<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3-过滤选择器示例</title>
    <style>
        ul>li:first-child {
            color: #09f;
        }

        ul>li:last-child {
            color: #90f;
        }

        :not(.three) {
            color: #f09;
        }

        li:nth-child(even) {
            color: #9f0;
        }

        li:nth-child(n+1) {
            color: #9cf;
        }

        li:nth-child(3) {
            color: #9fc;
        }

        ul>li:nth-child(-n+3) {
            color: #9fc;
        }

        :nth-child(3n) {
            color: #09f;
        }

        :nth-child(3n+1) {
            color: rgb(231, 247, 87);
        }

        :nth-child(3n+2) {
            color: rgb(255, 0, 170);
        }
    </style>
</head>

<body>
    <h2>网络小说</h2>
    <ul>
        <li>王妃不好当</li>
        <li>致命交易</li>
        <li class="three">迦兰寺</li>
        <li>逆天之宠</li>
        <li>交错时光的爱恋</li>
        <li>张震鬼故事</li>
        <li>第一次亲密接触</li>
    </ul>

    <ul>
        <li>王妃不好当A</li>
        <li>致命交易B</li>
        <li class="three">迦兰寺C</li>
        <li>逆天之宠D</li>
        <li>交错时光的爱恋E</li>
        <li>张震鬼故事F</li>
        <li>第一次亲密接触G</li>
    </ul>

    <!-- 
        1.设置ul中第1个<li>元素的文本颜色为 #09f
        2.设置ul中最后一个<li>元素的文本颜色为#90f
        3.设置class不为three的<li>的元素的文本颜色为#f09、
        4.设置索引值为偶数的<li>元素的文本颜色#9f0
        5.设置索引值大于1的<li>元素的文本颜色#9cf
        6.设置所有第3个li元素的文本颜色为#9fc
        7.设置每个ul中前3个li元素的文本颜色为#9fc
        8.设置循环样式，第1，4，7颜色相同，第2，5，8颜色相同，第3，6，9颜色相同


        结论：
            :nth-child(数字):从1开始        indexof
            :nth-child(数字n):数字的指定倍数
            :nth-child(数字n+数字):循环样式
     -->
</body>

</html>